<template>
  <master :title="name + ' 表结构'">
    <div class="searchForm">
      <div class="searchFormInputs" style="flex:1;">
        <el-input
          class="searchFormInput"
            v-model="sql"
            type="textarea"
            placeholder="查询语句"
          ></el-input>
      </div>
      <div class="searchFormBtn">
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="searchList"
          >查询</el-button>
        <el-button
          type="warning"
          @click="add"
          >新增字段</el-button>
        <el-button
          type="success"
          @click="getCode"
          >复制模型代码</el-button>
        <el-button
          type="danger"
          @click="$back"
          >返回</el-button
        >
      </div>
    </div>
    <el-table :data="rows" stripe style="width: 100%">
      <el-table-column :width="col.length * 13" v-for="col in cols" :prop="col" :label="col">
      </el-table-column>
      <el-table-column width="200" fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-edit"
            @click="edit(scope.row)"
            >修改</el-button
          >
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="delet(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="'操作'" :visible.sync="visible">
      <el-form ref="editForm">
        <el-form-item label="执行语句">
          <el-input
            type="textarea"
            v-model="editSql"
            rows="8"
            placeholder="请输入执行SQL"
          ></el-input>
        </el-form-item>
        <el-form-item style="text-align: right;">
          <el-button
            type="primary"
            @click="visible = false"
            >取消</el-button
          >
          <el-button
            type="danger"
            @click="save"
            >确定</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </master>
  </template>
  <script type="text/javascript">
  (function (G) {
    G.vue({
    "usingComponents": {
      "master": "/components/Master/Master",
      "listpage": "/components/List/Page/Page"
    },
    "enablePullDownRefresh": true
  },{
      data: {
        rows:[],
        cols:[],
        dbn:'',
        sql:'',
        id:'',
        editSql:'',
        visible:false
      },
      methods: {
        async getCode(){
          let models = {}
          for(let i = 0; i < this.rows.length; i ++){
            let item = this.rows[i]
            models[item.COLUMN_NAME] = {
              label:item.COLUMN_COMMENT || item.COLUMN_NAME,
              data_type:item.COLUMN_TYPE,
              type:'input',
              defaultValue:item.COLUMN_DEFAULT
            }
          }
          models = JSON.stringify(models)
          console.log(models)
          try{
            await navigator.clipboard.writeText(models)
            G.toask('生成成功,已复制到剪切板')
          }catch(e){
            G.alert('生成成功,请至开发者工具控制台查看')
          }
        },
        async searchList(){
          let tables = await G.post('/v1/datasource/test',{ id:this.id,content:this.sql },null,{ loading:true,timeout:10 * 60 * 1000 })
          this.cols = []
          for(let key in tables[0]) this.cols.push(key)
          this.rows = tables
        },
        async save(){
          let res = await G.post('/v1/datasource/test',{ id:this.id,content:this.editSql },null,{ loading:true,timeout:10 * 60 * 1000 })
          this.visible = false
          if(!res.errorMsg) {
            G.toask('操作成功')
            await this.searchList()
          }
        },
        async delet(item){
          this.editSql = `ALTER TABLE ${ this.name } DROP COLUMN ${item.COLUMN_NAME};`
          this.visible = true
        },
        add(){
          this.editSql = `ALTER TABLE ${ this.name } ADD COLUMN yourcolumn VARCHAR(255);`
          this.visible = true
        },
        async edit(item){
          this.editSql = `ALTER TABLE ${ this.name } MODIFY COLUMN ${item.COLUMN_NAME}`
          this.editSql += ' ' + item.COLUMN_TYPE
          if(item.IS_NULLABLE == 'YES') this.editSql += ` NOT NULL`
          if(item.COLUMN_KEY == 'PRI') this.editSql += ` UNIQUE PRIMARY KEY`
          if(item.COLUMN_COMMENT) this.editSql += ` COMMENT "${ item.COLUMN_COMMENT }"`
          this.editSql += ';'
          this.visible = true
        }
      },
      async mounted(query) {
        this.dbn = query.dbn
        this.name = query.name
        this.id = query.id
        this.sql = `SELECT COLUMN_NAME,IS_NULLABLE,COLUMN_TYPE,COLUMN_KEY,COLUMN_COMMENT,CHARACTER_SET_NAME FROM INFORMATION_SCHEMA.COLUMNS WHERE TABLE_SCHEMA = '${ this.dbn }' AND TABLE_NAME = '${ this.name }' ORDER BY COLUMN_KEY DESC;`
        this.searchList()
      }
    });
  })(Y)
  </script>
  <style scoped>
  
  </style>
